<template>
    <div class="heat-page">
        <Header class="header"/>
        <div class="top-banner"></div>
        <div class="content">
            <div class="content-title">
                <ul class="title-tab">
                    <li class="title-item" :class="current_page==='heat' ? 'select-item': ''"
                        @click="current_page='heat'">热播榜
                    </li>
                    <li class="title-item" :class="current_page==='search' ? 'select-item': ''"
                        @click="current_page='search'">热搜榜
                    </li>
                </ul>
            </div>
            <div class="content-body">
                <div class="top-page">
                    <div class="top-sum-head even" v-if="current_page==='heat'">
                        <span class="glyphicon glyphicon-fire"></span> 热播榜
                    </div>
                    <div class="top-sum-head even" v-if="current_page==='search'">
                        <span class="glyphicon glyphicon-fire"></span> 热搜榜
                    </div>
                    <ul>
                        <li class="sum-li" v-for="(rank_info, i) in rank_info_list"
                            :class="{even:i%2===1,liRed:i===1}">
                            <span style="color: #ff3000" v-if="i+1===1">
                                <span class="li-num">{{i+1}}</span>
                                <a :href="`/video/${rank_info.id}`" style="color: #ff3000">
                                    <span class="li-content">{{rank_info.title}}</span>
                                </a>
                            </span>
                            <span style="color: #ff6000" v-else-if="i+1===2">
                                <span class="li-num">{{i+1}}</span>
                                <a :href="`/video/${rank_info.id}`" style="color: #ff6000">
                                    <span class="li-content">{{rank_info.title}}</span>
                                </a>
                            </span>
                            <span style="color: #ffb400" v-else-if="i+1===3">
                                <span class="li-num">{{i+1}}</span>
                                <a :href="`/video/${rank_info.id}`" style="color: #ffb400">
                                    <span class="li-content">{{rank_info.title}}</span>
                                </a>
                            </span>
                            <span v-else>
                                <span class="li-num" style="color: #b0b0b0">{{i+1}}</span>
                                <a :href="`/video/${rank_info.id}`">
                                    <span class="li-content" style="color: #222">{{rank_info.title}}</span>
                                </a>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header"

    export default {
        name: "HeatPage",
        data() {
            return {
                current_page: "search",
                rank_info_list: [],
            }
        },
        methods:{
            get_ranking(){
                // 获取课程地区信息
                this.$axios.post(`${this.$settings.base_url}/video/leaderboard`,{
                    "rank": this.current_page // 请求参数
                }).then(response => {
                    this.rank_info_list = response.data;
                    // console.log(this.rank_info_list)
                }).catch(() => {
                    this.$message({
                        message: "获取排行榜信息有误，请联系客服工作人员",
                    })
                })
            },
        },
        watch:{
            current_page(){
                this.get_ranking()
            }
        },
        components: {
            Header
        },
        created() {
            this.get_ranking()
        }
    }
</script>

<style scoped>
    .header {
        background: white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        position: relative;
    }

    .content {
        height: 100%;
        margin: 30px 200px;
        position: relative;
    }

    .content-title {
        margin-bottom: 25px;
    }

    .title-tab {
        text-align: center;
    }

    .title-item {
        position: relative;
        font-size: 30px;
        display: inline-block;
        margin: 10px 60px;
        color: #666;
        cursor: pointer;
    }

    .select-item {
        color: #337ab7;
        border-bottom: 5px;
    }

    .select-item:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -5px;
        margin-left: -15px;
        width: 30px;
        height: 4px;
        border-radius: 4px;
        background-color: #337ab7;
    }

    ul li {
        list-style: none;
        margin-bottom: 0;
    }

    .top-banner {
        margin-bottom: 26px;
        margin-top: 26px;
        height: 120px;
        background: #ffad66 url("../assets/img/heat-top-banner.png") top no-repeat;
    }

    .content-body {
        margin-top: 26px;
    }

    .top-page {
        /*display: inline-block;*/
        width: 30%;
        /*margin: 0 10px;*/
        margin: 0 auto;
        border: 1px solid #f7f7f7;
        border-radius: 4px;
    }


    .top-page .top-sum-head {
        font-size: 24px;
        padding-left: 20px;
        line-height: 57px;
        background-color: #f0f0f0;
    }

    .top-page .sum-li.even {
        background-color: #fafafa;
    }

    .top-page .sum-li {
        padding: 10px 20px;
    }
    .li-red{
        color: #ff3000;
    }
    .li-num{
        margin-right: 10px;
        font-family: Impact;
        font-size: 20px;
    }
    .li-content{
        font-size: 17px;
    }
    .glyphicon {
        color: #337ab7;
    }
    a:hover{
        color: #0d9bff;
        text-decoration: none;
    }
</style>